<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05绘制柱状图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            border: 1px solid #030;
        }
    </style>
</head>
<body>
<!--canvas的高度和宽度务必使用行内样式设置-->
<canvas height="420px" width="800px">

</canvas>
</body>
</html>

<script>
    // 获取canvas元素
    let canvas = document.querySelector('canvas');
    // 获取绘图上下文
    let ctx = canvas.getContext('2d');
    ctx.font = '20px 微软雅黑';
    ctx.fillText('柱状图', 50, 20);

    // 绘制坐标轴
    ctx.moveTo(100, 100)
    ctx.lineTo(100, 400)
    ctx.lineTo(700, 400)
    ctx.stroke();

    // 绘制线段
    ctx.moveTo(100, 100)
    ctx.lineTo(700, 100)
    ctx.fillText('150', 60, 110)

    ctx.moveTo(100, 160)
    ctx.lineTo(700, 160)
    ctx.fillText('120', 60, 170)

    ctx.moveTo(100, 220)
    ctx.lineTo(700, 220)
    ctx.fillText('90', 60, 230)

    ctx.moveTo(100, 280)
    ctx.lineTo(700, 280)
    ctx.fillText('60', 60, 290)

    ctx.moveTo(100, 340)
    ctx.lineTo(700, 340)
    ctx.fillText('30', 60, 350)

    ctx.stroke()

    // 绘制水平方向
    ctx.moveTo(250, 400)
    ctx.lineTo(250, 410)
    ctx.fillText('食品', 170, 415)

    ctx.moveTo(400, 400)
    ctx.lineTo(400, 410)
    ctx.fillText('衣服', 320, 415)

    ctx.moveTo(550, 400)
    ctx.lineTo(550, 410)
    ctx.fillText('住房', 470, 415)
    ctx.fillText('其他', 640, 415)


    ctx.stroke()

    // 绘制柱状图
    ctx.fillStyle = 'red'
    ctx.fillRect(120, 280, 100, 120)
    ctx.fillRect(270, 340, 100, 60)
    ctx.fillRect(420, 160, 100, 240)
    ctx.fillRect(570, 220, 100, 180)

</script>
